<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas {
				border: 1px solid;
				background-color: #FFD700;
			}
		</style>
	</head>

	<body>
		<canvas id="mycanvas" width="1200" height="600"></canvas>
		<script type="text/javascript">
			var huabi = document.getElementById("mycanvas").getContext("2d");

			var rot = 0;
			var t = 500;
			var l = 800;
            var w=400;
			var xzj = 5;
			var r = 100;
			setInterval(function() {
				huabi.clearRect(0, 0, 1400, 800)

				var y = Math.sin(rot / 180 * Math.PI) * (0.5 * r);
				var x = Math.cos(rot / 180 * Math.PI) * (0.5 * r);

				var huchang = xzj * Math.PI * r / 180;
				huabi.beginPath()
				huabi.arc(l, t, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();
				
				huabi.beginPath();
				huabi.arc(l, t, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				huabi.fillStyle = "white";
				huabi.fill();

				huabi.beginPath();
				huabi.arc(l + x, t + y, 0.5 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "white";
				huabi.fill();

				huabi.beginPath();
				huabi.arc(l - x, t - y, 0.5 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();

				huabi.beginPath()
				huabi.arc(l + x, t + y, 0.15 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();
				huabi.beginPath()
				huabi.arc(l - x, t - y, 0.15 * r, 0, 2 * Math.PI);
				huabi.closePath();
				huabi.fillStyle = "white";
				huabi.fill();

				huabi.beginPath()
				huabi.arc(l + w, t, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();

				huabi.beginPath();
				huabi.arc(l + w, t, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				huabi.fillStyle = "white";
				huabi.fill();

				huabi.beginPath();
				huabi.arc(l + x + w, t + y, 0.5 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "white";
				huabi.fill();

				huabi.beginPath();
				huabi.arc(l - x + w, t - y, 0.5 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();

				huabi.beginPath()
				huabi.arc(l + x + w, t + y, 0.15 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();
				
				huabi.beginPath()
				huabi.arc(l - x + w, t - y, 0.15 * r, 0, 2 * Math.PI);
				huabi.fillStyle = "white";
				huabi.fill();
				rot = rot - xzj;
				l = l - huchang;
				
				huabi.beginPath();
				huabi.lineTo(l,t);
				huabi.lineTo(l+100,t-200);
				huabi.closePath();
				huabi.stroke();
					
					huabi.beginPath();
				huabi.lineTo(l+100,t-200);
				huabi.lineTo(l+130,t-250);
				huabi.closePath();
				huabi.stroke();
				
				huabi.beginPath();
				huabi.lineTo(l+100,t-200);
				huabi.lineTo(l+300,t-200);
				huabi.lineTo(l+400,t);
				huabi.lineTo(l+200,t);
				huabi.closePath();
				huabi.stroke();
				
				huabi.beginPath();
				huabi.arc(l+200,t,30,0,2*Math.PI)
				huabi.closePath();
				huabi.stroke();
				
	
				huabi.beginPath();
				huabi.lineTo(l+200,t);
				huabi.lineTo(l+310,t-220);
				huabi.closePath();
				huabi.stroke();
				
				huabi.beginPath();
				huabi.lineTo(l+290,t-220);
				huabi.lineTo(l+330,t-220);
				huabi.closePath();
				huabi.stroke();
				
			
				
				


			}, 20)

		</script>
	</body>

</html>